																<!--未登录时首页-->
<!doctype html>
<html style="overflow:scroll" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>码虫</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/respond.js}"></script>
<script th:src="@{/js/html5.js}"></script>
<style type="text/css">
	.button{
		height: 50px; 
	    width: 300px;
	    border: none;
	    font-size: 30px;
	    border-radius: 4px;
	    background-color: blue;
	    color: white;
	    padding:12px,28px;
	}
</style>




	<script type="text/javascript">
    function click()
    {
        window.alert("请先登录账号！");
        window.location.href="/code/login";
    }
</script>
</head>
<body>

<!--nav-->
<nav id="pc_nav" class="container clearfix hidden-xs">
	<a href="http://www.baidu.com" th:href="@{/outLoginIndex}" class="fl mt10"><img th:src="@{/images/codeLogo.jpg}" width="120px" height="70px" ></a>
    <ul class="fr clearfix">
    	<li><a href="http://www.baidu.com" th:href="@{/outLoginIndex}" >首页</a></li>
    	<li><span>|</span></li>
        <li><a href="http://www.baidu.com" th:href="@{/item/itemsList}">项目</a></li>
        <li><span>|</span></li>
        <li><a href="http://www.baidu.com" th:href="@{/help}">帮助</a></li>
        <li><span>|</span></li>
        <li><a href="http://www.baidu.com"  th:href="@{/login}">登录</a></li>
        <li><span>|</span></li>
        <li><a href="http://www.baidu.com" th:href="@{/register}">注册</a></li>
		<li>
		<span><a href="javascript:click()"><img th:src="@{/images/center.png}" height="60px" width="60px"></a></span>
		</li>
    </ul>
</nav>

<div id="banner" class="carousel slide">

   <div class="carousel-inner">
      <div class="item active">
         <img src="images/banner1.png" alt="">
      </div>
      <div class="item">
         <img src="images/banner2.png" alt="">
      </div>
      <div class="item">
         <img src="images/banner1.png" alt="">
      </div>
      <div class="item">
         <img src="images/banner2.png" alt="">
      </div>
   </div>
</div>
<!--/banner-->

<!--操作流程-->
<div id="products" class="container">
  <div style="float: left;margin-top: 40px;">
  	<div style="color: darkgray;text-align: center;float: left;margin-right: 150px;">
  		<p style="font-size: 55px;">123,123,123</p>
  		<span>累计金额</span>
  	</div>
  	<div style="color: darkgray;text-align: center;float: left;margin-right: 170px;">
  		<p style="font-size: 55px;;">3,123</p>
  		<span>项目数量</span>
  	</div>
  	<div style="color: darkgray;text-align: center;float: left;">
  		<p style="font-size: 55px;;">123,123</p>
  		<span>注册开发者</span>
  	</div>
  </div>
</div>
<hr />
<!--码虫交易与服务流程-->
<div style="text-align: center;">
	<div>
		<p style="text-align: center;font-size: 30px;margin-top: 50px;margin-bottom: 30px;">码虫交易与服务流程<br /></p>
	</div>
	<div style="height: 340px;margin-left: 10%;">x`
		<div style="height: 340px;float: left;margin-left: 200px;border-bottom: 1px solid gainsboro;">
			<h6 style="margin-top: 60px;">//01</h6>
			<p style="font-size: 40px;margin: 20px;">发布需求</p>
			<p>不知道项目如何报价？</p>
			<p>在这里可以快速估价</p>
			<p>覆盖web、App、微信公众号等常用功能</p>
		</div>
		<div style="height: 340px;float: left;border-bottom: 1px solid gainsboro;">
			<img src="images/index-content-slice-1.png" width="600px",hheight="240px" style="vertical-align: middle;" />
		</div>
	</div>
	<div style="height: 340px;margin-left: 10%;">
		
		<div style="height: 340px;float: left;border-bottom: 1px solid gainsboro;margin-left: 200px;">
			<img src="images/index-content-slice-2.png" width="600px",hheight="240px" style="vertical-align: middle;" />
		</div>
		<div style="height: 340px;float: left;border-bottom: 1px solid gainsboro;">
			<h6 style="margin-top: 60px;">//02</h6>
			<p style="font-size: 40px;margin: 20px;">确认合作</p>
			<p>海量开发者，技能多样化</p>
			<p>实现技能需求匹配</p>
			<p>确认合作开发者</p>
		</div>
	</div>
	<div style="height: 340px;margin-left: 10%;">
		<div style="height: 340px;float: left;margin-left: 200px;border-bottom: 1px solid gainsboro;">
			<h6 style="margin-top: 60px;">//03</h6>
			<p style="font-size: 40px;margin: 20px;">资金托管</p>
			<p>项目款分阶段托管，自助验收支付开发者</p>
			<p>全方位保障开发进度</p>
			<p>全方位保障合作的可信度</p>
		</div>
		<div style="height: 340px;float: left;border-bottom: 1px solid gainsboro;">
			<img src="images/index-content-slice-3.png" width="600px",hheight="240px" style="vertical-align: middle;" />
		</div>
	</div>
	<div style="height: 340px;margin-left: 10%;">
		
		<div style="height: 340px;float: left;margin-left: 200px;">
			<img src="images/index-content-slice-4.png" width="600px",hheight="240px" style="vertical-align: middle;" />
		</div>
		<div style="height: 340px;float: left;">
			<h6 style="margin-top: 60px;">//04</h6>
			<p style="font-size: 40px;margin: 20px;">互相评价</p>
			<p>项目完成后，可以互相评价</p>
			<p>好的评价更容易接到项目哦</p>
			
		</div>
	</div>
	
</div>


<div style="background-color: gainsboro;height: 460px;">
	<p style="text-align: center;font-size: 35px;">看看他们怎么说</p>
	<div style="float: left;background-color: white;height: 320px;width: 280px;margin-left: 20%;">
		<div style="height: 180px;">
		<p style="font-size: 16px;line-height: 30px;color: lightgrey;">“在码市平台，找到的开发者很靠谱，也很及时;我们项目赶时间，码市确实起到了非常大的帮助。”</p>
		</div>
		<div style="margin-left: 108px;margin-bottom: 20px;margin-top: 30px;">
			<img src="images/center.png" width="60px"height="60px" style="vertical-align: middle;">
		</div>
		<div style="text-align: center;line-height: 20px;">
			<span>罗涛</span><br />
			<span>CEO</span>
		</div>
	</div>
	<div style="float: left;background-color: white;height: 320px;width: 280px;margin-left: 20px;">
		<div style="height: 180px;">
		<p style="font-size: 16px;line-height: 30px;color: lightgrey;">“在码市平台，找到的开发者很靠谱，也很及时;我们项目赶时间，码市确实起到了非常大的帮助。”</p>
		</div>
		<div style="margin-left: 108px;margin-bottom: 20px;margin-top: 30px;">
			<img src="images/center.png" width="60px"height="60px" style="vertical-align: middle;">
		</div>
		<div style="text-align: center;line-height: 20px;">
			<span>罗涛</span><br />
			<span>CEO</span>
		</div>
	</div>
	<div style="float: left;background-color: white;height: 320px;width: 280px;margin-left: 20px;">
		<div style="height: 180px;">
		<p style="font-size: 16px;line-height: 30px;color: lightgrey;">“在码市平台，找到的开发者很靠谱，也很及时;我们项目赶时间，码市确实起到了非常大的帮助。”</p>
		</div>
		<div style="margin-left: 108px;margin-bottom: 20px;margin-top: 30px;">
			<img src="images/center.png" width="60px"height="60px" style="vertical-align: middle;">
		</div>
		<div style="text-align: center;line-height: 20px;">
			<span>罗涛</span><br />
			<span>CEO</span>
		</div>
	</div>
</div>



<!--phone-->
<div id="phoneBg">
	<div id="phone" class="container">
    	<div class="row" style="height: 240px;align-content: center;" >
            <p style="font-size: 40px;color: white;margin-top: 50px;margin-bottom: 40px;" align="center" >心动了吗？立刻开始吧！</p><br />
	        <div align="center">
	        	<a th:href="@{/register}"><input type="button"  value="加入我们" class="button" /></a>
	        </div>
        </div>
    </div>
</div>
<!--/phone-->

<!--copy-->
<p id="copy"><span style="font-size: 18px;margin: 35px;">码虫</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Copyright@2018</span></p>
<!--/copy-->
</body>

</html>
